<template>
    <div>
      <!-- 添加日志弹出层背景-->
      <div class="addBg"  :style="{height:add_bg_height}"  @click="openAddTool"></div>
      <!-- 新建操作栏按钮-->
      <!---->
      <div class="addWrapper" @touchstart="dragStart" @touchmove="isDraging" @touchend="dragEnd" :style="{top:top,right:right,bottom:bottom,left:left}">
        <div class="add_group"  v-if="is_Add_Tool_Open"  :style="{height:add_tool_height}">
          <template v-for="(item,index) in list">
            <div :class="'toolBtn'+' '+'tool'+index" @click="addFile" :data-index="index">
              <span :data-index="index">{{item.title}}</span>
              <img :src="baseUrl+item.imgSrc" :data-index="index">
            </div>
          </template>
        </div>
        <div class="add_btn" >
          <img :style="" :src="baseUrl+'/static/images/document_man/add.png'">
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "AddDrag"
      ,props:{
          list:Array,
          toolGroupHeight:String
      }
      ,data(){
          return{
            // list:'',
            baseUrl:this.NET.BASE_URL, //文件访问地址头部 http://localhost:8080
            is_Add_Tool_Open:false,  //添加文件工具栏是否打卡
            add_bg_height:0,
            add_tool_height:0,
            isDrag:false, //是否开始拖拽
            top:'',
            right:'30px',
            bottom:'30px',
            left:'',
          }
      }
      ,methods:{
        //打开工具栏
        openAddTool(){
          if(!this.is_Add_Tool_Open){
            this.is_Add_Tool_Open=true;
            this.add_tool_height=this.toolGroupHeight;
            this.add_bg_height='100vh';
          }else{
            this.add_tool_height=0;
            this.add_bg_height=0;
            setTimeout(()=>{
              this.is_Add_Tool_Open=false;
            },300)
          }
        }
        ,dragStart(){
          this.isDrag=true;
        }
        ,isDraging(e){
          this.right='';
          this.bottom='';
          this.top=e.touches[0].pageY-35+'px';
          this.left=e.touches[0].pageX-25+'px';
        }
        ,dragEnd(){
          this.top='';
          this.left='';
          this.right='30px';
          this.bottom='30px';
          this.isDrag=false;
          this.openAddTool();
        }
        ,addFile(e){
              this.$emit('addFile',e)
        }
      }
    }
</script>

<style scoped>
  .addBg{
    position: fixed;
    z-index: 999;
    background-color: rgba(0, 0, 0,0.03);
    width: 100%;
    bottom:0;
    top: auto;
    transition: height 0.2s ease-out;
  }
  .addWrapper{
    position: fixed;
    z-index: 999;
  }
  .addWrapper .add_group{
    overflow: hidden;
    transition: height 0.2s ease-out;
  }
  .addWrapper div{
    padding: 10px 0;
    overflow: hidden;
    line-height: 40px;
    vertical-align: middle;
  }
  .addWrapper div span{
    line-height: 40px;
    display: inline-block;
    width: 60px;
    padding-right: 20px;
    text-align: right;
    font-size: 14px;
    color: #333;
  }
  .addWrapper .toolBtn img{
    float: right;
    vertical-align: middle;
    margin-right: 2px;
    width:40px;
    height: 40px;
  }
  .addWrapper .add_btn img{
    float: right;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    transition: transform .2s;
  }
</style>
